<template>
  <div class="box-header">
    <el-card class="box-card">
      <span>请先登录</span>
      <el-form ref="form">
        <el-form-item label="管理员" @submit.native.prevent>
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {}
    };
  },
  methods: {
    onSubmit() {
      this.$http.post("/login", this.form).then(res => {
        sessionStorage.token = res.data.token;
        this.$router.push("/welcome");
        this.$message({
          type: "success",
          message: "登陆成功"
        });
      });
    }
  }
};
</script>

<style>
.box-header {
  background: url(../assets/0.jpg) no-repeat;
  background-size: 100%;
  overflow: hidden;
  width: 100%;
  height: 950px;
}

.box-header .box-card {
  background-color: rgba(0, 0, 0, 0.5);
  width: 25rem;
  margin: 10rem auto;
}</style
>>
